<template>
  <div>
    <el-button type="success" @click="showDialog">{{ $t('库存变更记录') }}</el-button>
    <el-dialog
      append-to-body
      :title="$t('库存变更记录')"
      :visible.sync="dialog"
      width="1200px"
    >
      <div>
        <el-radio-group v-model="currentWarehouseId" @change="changeOption" class="mgb10 platform-radio" size="big" v-if="warehouseList.length > 1">
          <el-radio-button
            v-for="item in warehouseList"
            :key="item.id"
            :label="item.id"
          >
            {{item.warehouseName}}
          </el-radio-button>
        </el-radio-group>
      </div>

      <div>
        <el-radio-group v-model="currentTab" @change="handleClick" class="mgb10" size="medium">
          <el-radio-button label="mixin">{{ $t('混装') }}</el-radio-button>
          <el-radio-button label="box">{{ $t('整箱') }}</el-radio-button>
        </el-radio-group>
      </div>
      <template v-if="currentTab === 'mixin'">
        <el-radio-group v-model="queryParams.stockField" style="margin-bottom: 30px;" @change="changeOption">
          <el-radio-button label="stock_num">代发库存（已上架）</el-radio-button>
          <el-radio-button label="middle_stock_num">暂存库存（已上架）</el-radio-button>
          <el-radio-button label="full_stock_num">快出库存</el-radio-button>
        </el-radio-group>
        <div class="mgb20">
          {{ $t('common.类型') }}：
          <el-select v-model="queryParams.type" multiple :placeholder="$t('common.请选择')" @change="changeOption" style="width: 250px">
            <el-option :label="$t('货件新增')" :value="1"></el-option>
            <el-option :label="$t('订单消耗')" :value="2"></el-option>
            <el-option :label="$t('手动修改')" :value="5"></el-option>
            <el-option :label="$t('拣货退回')" :value="6"></el-option>
            <el-option :label="$t('箱转混装')" :value="7"></el-option>
            <el-option :label="$t('订单退回')" :value="8"></el-option>
            <el-option :label="'货柜分拣'" :value="9"></el-option>
            <el-option :label="'送仓消耗'" :value="10"></el-option>
            <el-option :label="'送仓退回'" :value="11"></el-option>
            <el-option :label="'配送消耗'" :value="12"></el-option>
          </el-select>
        </div>

        <el-table
          ref="goodsTable"
          :data="data"
          :border="true"
          row-key="id"
          :key="currentTab"
          v-loading="loading"
          @sort-change="handleSortChange"
        >
          <el-table-column
            prop="createTime"
            :label="$t('table.变更时间')"
            align="center"
            min-width="120"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            prop="goodsId"
            :label="$t('table.ListingIDAndSKU')"
            align="center"
            min-width="200"
          >
            <template v-slot="{row}">
              <template v-if="row.isSystemLabel">
                {{ $t('shipment.System label') }} ({{row.sku}})
              </template>
              <template v-else-if="row.isTB">
                {{ $t('shipment.Not labeled') }} {{row.sku ? `(${row.sku})` : ''}}
              </template>
              <template v-else>
                {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
              </template>
            </template>
          </el-table-column>
          <el-table-column
            prop="type"
            :label="$t('common.类型')"
            align="center"
            min-width="100"
          >
            <template v-slot="{row}">
              {{getStockType(row.type)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="beforeNum"
            :label="$t('table.变更前库存数量')"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="num"
            :label="$t('table.变更数量')"
            align="center"
            min-width="100"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            prop="afterNum"
            :label="$t('table.变更后库存数量')"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="remark"
            :label="$t('table.备注')"
            align="center"
            min-width="200"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="adminAccount"
            label="操作人"
            align="center"
            min-width="150"
            show-overflow-tooltip
          >
            <template v-slot="{row}">
              {{row.adminAccount || '-'}}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          @current-change="getData"
        >
        </el-pagination>
      </template>
      <template v-else>
        <el-radio-group v-model="boxQueryParams.stockField" style="margin-bottom: 30px;" @change="changeOption">
          <el-radio-button label="stock_num">代发库存（已上架）</el-radio-button>
          <el-radio-button label="middle_stock_num">暂存库存（已上架）</el-radio-button>
          <el-radio-button label="full_stock_num">快出库存</el-radio-button>
        </el-radio-group>
        <div class="mgb20">
          {{$t('table.goodsNumBox')}}：
          <el-select v-model="boxQueryParams.goodsNumInBox" :placeholder="$t('common.请选择')" @change="changeOption">
            <el-option :label="$t('common.all')" value=""></el-option>
            <el-option
              v-for="item in goodsNumInBoxArr"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>


          {{ $t('common.类型') }}：
          <el-select v-model="boxQueryParams.type" multiple :placeholder="$t('common.请选择')" @change="changeOption" style="width: 250px">
            <el-option :label="$t('货件新增')" :value="1"></el-option>
            <el-option :label="$t('箱转混装')" :value="2"></el-option>
            <el-option :label="$t('送仓消耗')" :value="3"></el-option>
            <el-option :label="$t('调货变更')" :value="4"></el-option>
            <el-option :label="$t('手动修改')" :value="5"></el-option>
            <el-option :label="$t('送仓贴标')" :value="6"></el-option>
            <el-option :label="'货柜分拣'" :value="7"></el-option>
            <el-option :label="'确认送仓'" :value="8"></el-option>
            <el-option :label="'货件作废'" :value="9"></el-option>
            <el-option :label="'创建送仓'" :value="10"></el-option>
            <el-option :label="'送仓取消'" :value="11"></el-option>
            <el-option :label="'送仓完成'" :value="12"></el-option>
            <el-option :label="'配送消耗'" :value="12"></el-option>
          </el-select>
        </div>

        <el-table
          :data="boxData"
          :border="true"
          :key="currentTab"
          row-key="id"
          v-loading="loading"
          @sort-change="handleBoxSortChange"
        >
          <el-table-column
            prop="createTime"
            :label="$t('table.变更时间')"
            align="center"
            min-width="120"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            prop="goodsId"
            :label="$t('table.ListingIDAndSKU')"
            align="center"
            min-width="200"
          >
            <template v-slot="{row}">
              <template v-if="row.isSystemLabel">
                {{ $t('shipment.System label') }} ({{row.sku}})
              </template>
              <template v-else-if="row.isTB">
                {{ $t('shipment.Not labeled') }} {{row.sku ? `(${row.sku})` : ''}}
              </template>
              <template v-else>
                {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
              </template>
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsNumInBox"
            :label="$t('table.goodsNumBox')"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="type"
            :label="$t('common.类型')"
            align="center"
            min-width="100"
          >
            <template v-slot="{row}">
              {{getBoxStockType(row.type)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="beforeNum"
            :label="$t('table.变更前库存数量')"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="num"
            :label="$t('table.变更数量')"
            align="center"
            min-width="100"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            prop="afterNum"
            :label="$t('table.变更后库存数量')"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="remark"
            :label="$t('table.备注')"
            align="center"
            min-width="200"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="adminAccount"
            label="操作人"
            align="center"
            min-width="150"
            show-overflow-tooltip
          >
            <template v-slot="{row}">
              {{row.adminAccount || '-'}}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :current-page.sync="boxQueryParams.page"
          :page-size="boxQueryParams.pageSize"
          :total="boxTotal"
          @current-change="getData"
        >
        </el-pagination>

      </template>

    </el-dialog>
  </div>
</template>

<script>
import {getBoxStockLog, getStockLog} from "@/api/stock";
import {deepCopy} from "@/utils";
import {getBoxStockType, getStockType} from "@/utils/stock";
import warehouseListMixin from "@/views/stock/mixin/warehouseListMixin";

export default {
  name: "StockLogDialog",
  mixins: [warehouseListMixin],
  props:{
    suitId: {
      required: true,
      type: Number,
    }
  },
  watch: {
    warehouseList(){
      if(this.warehouseList.length > 0){
        this.currentWarehouseId = this.warehouseList[0].id
      }
    }
  },
  data(){
    return {
      dialog: false,
      loading: false,
      queryParams: {
        page: 1,
        pageSize: 20,
        suitId: 0,
        stockField: 'stock_num',
        type: [],
        orderBy: '',
        orderField: '',
        warehouseId: 0,
      },
      data: [],
      total: 0,
      currentTab: 'mixin',
      currentWarehouseId: 0,
      boxQueryParams: {
        page: 1,
        pageSize: 20,
        suitId: 0,
        stockField: 'stock_num',
        type: [],
        orderBy: '',
        orderField: '',
        goodsNumInBox: '', // 箱装数
        warehouseId: 0,
      },
      goodsNumInBoxArr: [],
      boxData: [],
      boxTotal: 0,
    }
  },
  methods: {
    getBoxStockType,
    getStockType,
    showDialog(){
      this.dialog = true;
      this.queryParams.suitId = this.suitId
      this.boxQueryParams.suitId = this.suitId
      this.getData()
    },
    getData(){
      this.loading = true
      if(this.currentTab === 'mixin'){
        getStockLog(this.queryParams)
          .then(res=>{
            this.loading = false
            this.data = deepCopy(res.data)
            this.total = res.info.total;
          })
      }else{
        getBoxStockLog(this.boxQueryParams)
          .then(res=>{
            this.loading = false;
            this.boxData = deepCopy(res.data)
            this.boxTotal = res.info.total
            this.goodsNumInBoxArr = res.info.goodsNumInBox
          })
      }

    },
    changeOption(){
      this.queryParams.page = 1;
      this.boxQueryParams.page = 1;
      this.queryParams.warehouseId = this.currentWarehouseId
      this.boxQueryParams.warehouseId = this.currentWarehouseId
      this.getData()
    },
    handleSortChange(column){
      this.queryParams.orderBy = '';
      this.queryParams.orderField = '';
      if(column.order){
        this.queryParams.orderBy = column.order;
        this.queryParams.orderField = column.prop
      }
      this.changeOption()
    },
    handleBoxSortChange(column){
      this.boxQueryParams.orderBy = '';
      this.boxQueryParams.orderField = '';
      if(column.order){
        this.boxQueryParams.orderBy = column.order;
        this.boxQueryParams.orderField = column.prop
      }
      this.changeOption()
    },
    handleClick(){
      this.changeOption()
    },
  },
}
</script>

<style scoped lang="scss">

</style>
